<template>
  <div style="font-size: 0.3rem; margin-left: 0.4rem">
    <p style="height: 1rem; line-height: 1rem">
      <span style="float: left" @click="router.go(-1)"><</span>
      <span style="margin-left: 2.6rem">添加地址</span>
    </p>
    <p
      style="height: 1rem; line-height: 1rem; border-bottom: 1px solid #e5e5e5"
    >
      <span style="width: 20%">收货人：</span
      ><input
        type="text"
        style="width: 80%; border: none; border-bottom: 0.01rem solid #e5e5e5"
        v-model="xing"
        placeholder="请输入姓名"
      />
    </p>
    <p
      style="height: 1rem; line-height: 1rem; border-bottom: 1px solid #e5e5e5"
    >
      <span style="width: 25%">手机号码：</span
      ><input
        type="text"
        style="width: 70%; border: none; border-bottom: 0.01rem solid #e5e5e5"
        v-model="phone"
        placeholder="请输入手机号码"
      />
    </p>
    <p
      style="height: 1rem; line-height: 1rem; border-bottom: 1px solid #e5e5e5"
    >
      <span style="width: 25%">所在地区：</span
      ><input
        type="text"
        style="width: 70%; border: none; border-bottom: 0.01rem solid #e5e5e5"
        v-model="address"
        placeholder="请选择所在地区"
      />
    </p>
    <p
      style="height: 1rem; line-height: 1rem; border-bottom: 1px solid #e5e5e5"
    >
      <span style="width: 25%">详细地址：</span
      ><input
        type="text"
        style="width: 70%; border: none; border-bottom: 0.01rem solid #e5e5e5"
        v-model="xi"
        placeholder="街道门牌，无需重复地区信息"
      />
    </p>
    <p>
      <button
        style="
          width: 90%;
          height: 1rem;
          margin-left: 2%;
          background: #e5e5e5;
          border: none;
        "
        @click="bc"
      >
        保存
      </button>
    </p>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { showToast } from 'vant'
const router = useRouter()

const xing = ref('')
const phone = ref('')
const address = ref('')
const xi = ref('')
const bc = () => {
  const reg = /^1[3-9]\d{9}$/
  if (xing.value.length <= 0) {
    showToast('姓名不能为空')
  } else if (phone.value.length <= 0) {
    showToast('手机号不能为空')
  } else if (!reg.test(phone.value)) {
    showToast('手机号格式不正确')
  } else if (address.value.length <= 0) {
    showToast('地址不能为空')
  } else if (xi.value.length <= 0) {
    showToast('详细地址不能为空')
  } else {
    showToast('保存成功')
    localStorage.setItem(
      'di',
      JSON.stringify({
        xing: xing.value,
        phone: phone.value,
        address: address.value,
        xi: xi.value,
      }),
    )
    setTimeout(()=>{
      router.push('/ding/receiving')
    },500)
  }
}
</script>

<style></style>
